<template>
    <form class="card comment-form" @submit.prevent="addComments">
        <div class="card-block">
            <textarea v-model="comment_body.comment.body" class="form-control" placeholder="Write a comment..."
                rows="3"></textarea>
        </div>
        <div class="card-footer">
            <img src="http://i.imgur.com/Qr71crq.jpg" class="comment-author-img" />
            <button class="btn btn-sm btn-primary" type="submit">Post Comment</button>
        </div>
    </form>
</template>
<script setup lang="ts">
import { addcomments } from '@/api';
import { ref } from 'vue';
import { useRoute } from 'vue-router'
import { AddCommentInfo, Comment } from '@/model';

const emit = defineEmits<{
    (e: 'create-comment', comment: Comment): void
}>()

const route = useRoute()

const comment_body = ref<AddCommentInfo>({
    comment: {
        body: ''
    }
}
)

function addComments() {
    addcomments(comment_body.value, route.params.article_id as string).then(res => {
        comment_body.value.comment.body = '';
        emit('create-comment', res.data.comment)
    })
}

</script>
<style scoped></style>
